<template>
  <el-dialog title="编辑" :visible.sync="dialogVisible" width="500px">
    <div class="dataBox">
      <el-form
        :model="dataForm"
        :rules="rules"
        ref="dataForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="启用方式" prop="runMode">
          <el-radio-group v-model="dataForm.runMode">
            <el-radio :label="1">
              <el-tag color="#1890FF" size="mini" effect="dark">
                时段内启用
              </el-tag>
            </el-radio>
            <el-radio :label="0">
              <el-tag color="#FFB5AF" size="mini" style="color: #d1291b">
                时段内停用
              </el-tag>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-time-picker
            :disabled="disabled"
            style="width: 100%"
            v-model="dataForm.startTime"
            placeholder="请选择"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-time-picker
            :disabled="disabled"
            style="width: 100%"
            v-model="dataForm.endTime"
            placeholder="请选择"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
          >
          </el-time-picker>
        </el-form-item>

        <el-form-item label="出现频率" prop="frequency">
          <el-radio-group v-model="dataForm.frequency">
            <el-radio :label="2">
              <el-tag color="#1890FF" size="mini" effect="dark">
                每天一次
              </el-tag>
            </el-radio>
                  <el-radio :label="1">
              <el-tag color="#1890FF" size="mini" effect="dark">
                每次都有
              </el-tag>
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="公告标题" prop="title">
          <el-input
            type="text"
            placeholder="请输入公告标题"
            v-model="dataForm.title"
            maxlength="10"
            show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item label="公告内容">
          <el-input
            :autosize="{ minRows: 6, maxRows: 6 }"
            class="textarea"
            type="textarea"
            placeholder="请输入公告内容"
            v-model="dataForm.content"
            maxlength="200"
            show-word-limit
          >
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="openConfirmPopup">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      rules: {
        startTime: [{ required: true, message: "请选择", trigger: "change" }],
        endTime: [{ required: true, message: "请选择", trigger: "change" }],
        runMode: [{ required: true, message: "请选择", trigger: "change" }],
        title: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      disabled: false,
      dialogVisible: false,
      dataForm: {
        startTime: "",
        endTime: "",
        content: "",
        content: "",
        runMode: "",
      },
    };
  },
  methods: {
    open(item) {
      console.log(item);

      this.dialogVisible = true;
      if (item != null) {
        this.dataForm = item;
      }
    },
    openConfirmPopup() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$emit("confirm", "addI");
        }
      });
    },
    // 表单提交
    dataFormSubmit(immediate,callback) {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          const s = "1970-01-01 " + this.dataForm.startTime;
          const e = "1970-01-01 " + this.dataForm.endTime;

          if (moment(e) - moment(s) < 0) {
            this.$message.warning("结束时间不能早于开始时间");
            return;
          }
          this.dataForm.immediate = immediate;
          this.$http({
            url: this.$http.adornUrl(`/platform/noticeNew/updateNoticeNew`),
            method: "post",
            data: this.dataForm,
          })
            .then((res) => {
              this.dialogVisible = false;
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1500,
              });
              this.$parent.getDataList();
              callback && callback();
            })
            .catch((e) => {});
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-tag--mini{
  border-color: transparent !important;
}
.dataBox {
  padding-right: 40px;
}
</style>
